<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎邮件</title>
    <style type="text/css">
        /* 媒体查询 */
        @media screen and (max-width: 740px) {
            .div_container {
                font-size: 16px !important;
            }

            .but-container {
                margin-top: 1rem !important;
            }

            .butt_to {
                width: 150px !important;
                height: 40px !important;
                line-height: 40px !important;
                font-size: 16px !important;
            }
        }

        @media screen and (max-width: 550px) {
            .title_container {
                flex-direction: column !important;
            }

            .title_container div:nth-of-type(2) {
                margin-top: .5rem !important;
            }
        }

        .butt_to:hover {
            cursor: pointer;
            background: linear-gradient(135deg, #f02fc2, #6094ea);
            color: white;
            transition: 0.5s;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        }
    </style>
</head>
<body>
<div>
    <div class="div_container"
         style="text-align: center; font-size: 20px; color: #333333; border-radius: 1rem; min-height: 100vh; padding: 0 2rem; background: linear-gradient(135deg, #f02fc2, #6094ea);">
        <div class="avatar_container" style="width: 150px; height: 150px; margin: 0 auto; padding-top: 2rem;">
            <img src="https://image.kuailemao.xyz/blog/websiteInfo/avatar/52e4b3e9-b1e0-4e9b-ab6e-4effc237ab1a.jpg"
                 alt="头像"
                 style="width: 100%; height: 100%; border-radius: 40%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);">
        </div>
        <div class="title_container"
             style="margin-top: 20px; display: flex; justify-content: center; align-items: center;">
            <div>
                欢迎注册 <span style="color: #0653e8;font-weight: bold;font-size: 25px">Ruyu-Blog</span>
            </div>
            <div style="margin-left: 10px;">
                &nbsp;&nbsp; 一个全开源免费的个人博客网站
            </div>
        </div>
        <p style="margin: 1rem 0">
            您的邮件验证码为：<span th:text="${code}"
                                   style="color: #f06595;font-weight: bold;font-size: 1.5rem">123323</span>
        </p>
        <p>有效时间为 <span th:text="${expirationTime}"></span>，为了保障您的安全，请勿向他人泄露验证码信息。如非本人操作，请忽略此邮件
        </p>
        <p style="text-align: center"></p>
        <div class="but-container"
             style="display: flex; justify-content: space-around; align-items: center; margin-top: 2rem;">
            <a th:href="${toUrl}">
                <div class="butt_to"
                     style="width: 200px; height: 50px; line-height: 50px; text-align: center; font-size: 20px; font-weight: bold; color: #333333; background: white; border-radius: 1rem; margin: 0 auto;"
                     onmouseover="this.style.background='linear-gradient(135deg, #f02fc2, #6094ea)'; this.style.color='white'; this.style.boxShadow='0 0 10px rgba(0, 0, 0, 0.4)'; this.style.transition='0.5s';"
                     onmouseout="this.style.background='white'; this.style.color='#333333'; this.style.boxShadow='none';">
                    立即前往
                </div>
            </a>
            <a th:href="${openSourceAddress}">
                <div class="butt_to"
                     style="width: 200px; height: 50px; line-height: 50px; text-align: center; font-size: 20px; font-weight: bold; color: #333333; background: white; border-radius: 1rem; margin: 0 auto;"
                     onmouseover="this.style.background='linear-gradient(135deg, #f02fc2, #6094ea)'; this.style.color='white'; this.style.boxShadow='0 0 10px rgba(0, 0, 0, 0.4)'; this.style.transition='0.5s';"
                     onmouseout="this.style.background='white'; this.style.color='#333333'; this.style.boxShadow='none';">
                    给个Star
                </div>
            </a>
        </div>
        <div style="text-align: center;padding: 1rem 0;font-size: 15px">此为系统邮件，请勿回复。</div>
    </div>
</div>
<script>
    // 针对旧版 Outlook 的特殊处理
    if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
        var elements = document.querySelectorAll('.butt_to');
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.width = '200px';
            elements[i].style.height = '50px';
        }
    }
</script>
</body>
</html>